<template>
	<view>
		<!-- 状态栏 -->
		<view class="status" :style="{position:headerPosition}"></view>
		<view class="header">
			<view class="left" @tap="left">
				<span class="icon">&#xe609;</span>
			</view>
			<view class="input">
				<span class="icon">&#xe63d;</span>
				<input placeholder="默认商品" @confirm="toSearch" />
			</view>
			<view class="city" @tap="toSelectCity">
				<view class="name">北京</view>
				<span class="icon">&#xe606;</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"nav-header",
		data() {
			return {
				"headerPosition": "fixed"
			}
		},
		onLoad() {

		},
		methods: {
			left(event) {
				uni.navigateTo({
					url:"/pages/HM-shophome/HM-shophome",
					success() {
						console.log("success")
					}
				})
			},
			toSearch(event) {
				let value = event.detail.value;
				console.log(value);
			},
			toSelectCity(event) {
				console.log(event);
				console.log("go select city");
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../static/css/iconfont.css";
	@import "../../static/css/common/varibles.styl";
	.status 
		width:100%;
		height:0;
		/* #ifdef APP-PLUS */
		height: var(--status-bar-height);
		/* #endif */
		background-color: $bgColor;
		position: fixed;
		top: 0;
		z-index: 999;
	.header 
		width: 100%;
		height: 100upx;
		background-color: $bgColor;
		display: flex;
		position: fixed;
		top:0;
		/* #ifdef APP-PLUS */
		top:var(--status-bar-height);
		/* #endif */
		z-index: 996;
		.left 
			width: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
		.input 
			flex: 1;
			display:flex;
			justify-content:center;
			align-items:center;
			position:relative;
			input 
				width: calc(100% - 60upx);
				height:60upx;
				background-color:#ffffff;
				border-radius:60upx;
				padding-left: 60upx;
				font-size:30upx;
			.icon 
				width: 60upx;
				height: 60upx;
				color: #a18090;
				position:absolute;
				z-index: 996;
				top: 22upx;
				left: 0;
				font-size: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
		.city 
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 30upx;
			margin-right: 10upx;
			.name 
				height: 60upx;
				font-size: 30upx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			.icon 
				height: 60upx;
				font-size: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
</style>
